<template>
  <div class="page-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <h1 class="title">购物车</h1>
      <span class="edit-btn" @click="toggleEditMode">
        {{ isEditMode ? '完成' : '编辑' }}
      </span>
    </div>

    <!-- 购物车内容 -->
    <div class="cart-content" v-if="cartStore.cartItems.length">
      <!-- 全选区域 -->
      <div class="select-all">
        <nut-checkbox 
          v-model="selectAll" 
          @change="handleSelectAll"
          label="全选"
        />
        <span class="select-all-text">全选</span>
      </div>

      <!-- 商品列表 -->
      <div class="cart-list">
        <div 
          class="cart-item" 
          v-for="item in cartStore.cartItems" 
          :key="item.id"
        >
          <div class="item-select">
            <nut-checkbox 
              v-model="item.selected" 
              @change="() => handleItemSelect(item.id)"
            />
          </div>
          
          <div class="item-image" @click="goToProduct(item.id)">
            <img :src="item.image" :alt="item.name" />
          </div>
          
          <div class="item-info" @click="goToProduct(item.id)">
            <h4 class="item-name">{{ item.name }}</h4>
            <p class="item-desc" v-if="item.description">{{ item.description }}</p>
            <div class="item-price">
              <span class="current-price">¥{{ item.price }}</span>
              <span class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</span>
            </div>
          </div>
          
          <div class="item-actions">
            <div class="quantity-control" v-if="!isEditMode">
              <nut-button 
                size="small" 
                @click="decreaseQuantity(item.id)"
                :disabled="item.quantity <= 1"
              >
                <Minus />
              </nut-button>
              <span class="quantity">{{ item.quantity }}</span>
              <nut-button 
                size="small" 
                @click="increaseQuantity(item.id)"
              >
                <Plus />
              </nut-button>
            </div>
            
            <div class="delete-btn" v-if="isEditMode">
              <nut-button 
                type="danger" 
                size="small"
                @click="removeItem(item.id)"
              >
                <Del />
              </nut-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部结算栏 -->
      <div class="checkout-bar">
        <div class="total-info">
          <div class="total-price">
            合计: <span class="price">¥{{ cartStore.selectedTotalPrice.toFixed(2) }}</span>
          </div>
          <div class="total-count">
            已选 {{ cartStore.selectedItems.length }} 件商品
          </div>
        </div>
        
        <div class="checkout-actions">
          <nut-button 
            type="primary" 
            size="large"
            :disabled="!cartStore.selectedItems.length"
            @click="goToCheckout"
          >
            结算({{ cartStore.selectedItems.length }})
          </nut-button>
        </div>
      </div>
    </div>

    <!-- 空购物车状态 -->
    <div class="empty-cart" v-else>
      <img src="https://picsum.photos/120/120?random=1" alt="空购物车" />
      <h3>购物车是空的</h3>
      <p>快去挑选心仪的商品吧</p>
      <nut-button type="primary" @click="goToHome">去逛逛</nut-button>
    </div>

    <!-- 推荐商品 -->
    <div class="recommend-section" v-if="cartStore.cartItems.length">
      <h3 class="section-title">为您推荐</h3>
      <div class="recommend-list">
        <div 
          class="recommend-item" 
          v-for="product in recommendProducts" 
          :key="product.id"
          @click="goToProduct(product.id)"
        >
          <div class="product-image">
            <img :src="product.image" :alt="product.name" />
          </div>
          <div class="product-info">
            <h4 class="product-name">{{ product.name }}</h4>
            <div class="product-price">
              <span class="current-price">¥{{ product.price }}</span>
              <span class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '@/stores/cart'
import { Plus, Minus, Del } from '@nutui/icons-vue'

const router = useRouter()
const cartStore = useCartStore()

// 编辑模式
const isEditMode = ref(false)

// 全选状态
const selectAll = computed({
  get: () => {
    return cartStore.cartItems.length > 0 && cartStore.cartItems.every(item => item.selected)
  },
  set: (value) => {
    cartStore.toggleSelectAll(value)
  }
})

// 推荐商品
const recommendProducts = ref([
  {
    id: 8,
    name: '无线充电器',
    price: 99,
    originalPrice: 129,
    image: 'https://picsum.photos/80/80?random=1'
  },
  {
    id: 9,
    name: '手机壳',
    price: 29,
    image: 'https://picsum.photos/80/80?random=1'
  },
  {
    id: 10,
    name: '蓝牙耳机',
    price: 199,
    originalPrice: 299,
    image: 'https://picsum.photos/80/80?random=1'
  }
])

// 切换编辑模式
const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value
}

// 全选/取消全选
const handleSelectAll = (value) => {
  cartStore.toggleSelectAll(value)
}

// 选择单个商品
const handleItemSelect = (productId) => {
  cartStore.toggleSelect(productId)
}

// 增加数量
const increaseQuantity = (productId) => {
  const item = cartStore.cartItems.find(item => item.id === productId)
  if (item) {
    cartStore.updateQuantity(productId, item.quantity + 1)
  }
}

// 减少数量
const decreaseQuantity = (productId) => {
  const item = cartStore.cartItems.find(item => item.id === productId)
  if (item && item.quantity > 1) {
    cartStore.updateQuantity(productId, item.quantity - 1)
  }
}

// 移除商品
const removeItem = (productId) => {
  cartStore.removeFromCart(productId)
}

// 跳转到商品详情
const goToProduct = (productId) => {
  router.push(`/product-detail/${productId}`)
}

// 跳转到结算页
const goToCheckout = () => {
  if (cartStore.selectedItems.length > 0) {
    router.push('/checkout')
  }
}

// 跳转到首页
const goToHome = () => {
  router.push('/')
}

onMounted(() => {
  // 加载购物车数据
  cartStore.loadFromLocalStorage()
})
</script>

<style scoped>
.header {
  background: white;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.edit-btn {
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.cart-content {
  flex: 1;
}

.select-all {
  background: white;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.select-all-text {
  font-size: 14px;
  color: #333;
}

.cart-list {
  background: white;
}

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-select {
  flex-shrink: 0;
  margin-top: 4px;
}

.item-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  cursor: pointer;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
  cursor: pointer;
  min-width: 0;
  margin-right: 16px;
  overflow: hidden;
  max-width: calc(100% - 200px);
}

.item-name {
  font-size: 14px;
  color: #333;
  margin: 0 0 4px 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.item-desc {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.item-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}

.current-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff4757;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.item-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  position: relative;
  z-index: 1;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  justify-content: center;
}

.quantity {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.delete-btn {
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .cart-item {
    gap: 8px;
    padding: 12px;
  }
  
  .item-image {
    width: 70px;
    height: 70px;
  }
  
  .item-info {
    margin-right: 12px;
    max-width: calc(100% - 180px);
  }
  
  .item-actions {
    min-width: 70px;
  }
}

@media (max-width: 320px) {
  .cart-item {
    gap: 6px;
    padding: 10px;
  }
  
  .item-image {
    width: 60px;
    height: 60px;
  }
  
  .item-info {
    margin-right: 8px;
    max-width: calc(100% - 160px);
  }
  
  .item-actions {
    min-width: 60px;
  }
  
  .quantity-control {
    gap: 6px;
  }
  
  .quantity {
    min-width: 25px;
    font-size: 13px;
  }
}

/* 确保在极小屏幕下按钮仍然可见 */
@media (max-width: 280px) {
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .item-info {
    margin-right: 0;
    max-width: 100%;
    order: 2;
  }
  
  .item-actions {
    order: 3;
    align-self: flex-end;
    min-width: auto;
  }
  
  .item-image {
    order: 1;
    align-self: center;
  }
}

.checkout-bar {
  background: white;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  position: sticky;
  bottom: 50px;
}

.total-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.total-price {
  font-size: 14px;
  color: #333;
}

.price {
  font-size: 18px;
  font-weight: 600;
  color: #ff4757;
}

.total-count {
  font-size: 12px;
  color: #666;
}

.checkout-actions {
  flex-shrink: 0;
}

.empty-cart {
  text-align: center;
  padding: 80px 20px;
  color: #999;
}

.empty-cart img {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-cart h3 {
  font-size: 18px;
  color: #666;
  margin: 0 0 8px 0;
}

.empty-cart p {
  font-size: 14px;
  color: #999;
  margin: 0 0 24px 0;
}

.recommend-section {
  background: white;
  margin-top: 12px;
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.recommend-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.recommend-item {
  cursor: pointer;
  text-align: center;
}

.recommend-item .product-image {
  width: 100%;
  height: 80px;
  margin-bottom: 8px;
}

.recommend-item .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.recommend-item .product-name {
  font-size: 12px;
  color: #333;
  margin: 0 0 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-item .product-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recommend-item .current-price {
  font-size: 14px;
  font-weight: 600;
  color: #ff4757;
}

.recommend-item .original-price {
  font-size: 10px;
  color: #999;
  text-decoration: line-through;
}
</style>
